<template>
  <div class="wrapper">
    <div class="container">
      <div class="top">
        <div class="title">智慧餐厅</div>
        <div class="desc">基于机器视觉的智能餐厅结算系统</div>
      </div>
      <router-view />
      <footer>
        <p>2017级物联网工程1班-夏友铭</p>
        <p>Copyright &copy; 2021 三明学院信息工程学院 版权所有 v1.0.2</p>
      </footer>
    </div>
  </div>
</template>

<script>
export default { name: 'AccountLayout' }
</script>

<style lang="less" scoped>
.wrapper {
  height: 100%;
  .container {
    width: 100%;
    min-height: 100%;
    background: #f0f2f5;
    background-size: 100%;
    padding: 110px 0 144px;
    position: relative;
    user-select: none;
    .top {
      text-align: center;
      margin-bottom: 25px;
      .title {
        font-size: 28px;
        color: rgba(0, 0, 0, 0.55);
        font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
        font-weight: 600;
        position: relative;
      }
      .desc {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.4);
        margin-top: 15px;
      }
    }
    .main {
      margin: 0 auto;
      user-select: none;
    }
    footer {
      position: absolute;
      width: 100%;
      bottom: 0;
      margin: 48px 0 24px;
      text-align: center;
      p {
        margin-top: 6px;
        font-size: 14px;
        color: #989898;
        a {
          color: inherit;
        }
      }
    }
  }
}
</style>
